<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>首页</title>
  <link rel="icon" href="../static/images/favicon/favicon.ico" />
  <link rel="stylesheet" href="../static/css/layui.css" />
 </head>
 <body>
  <ul class="layui-nav layui-bg-cyan">
   <li class="layui-nav-item layui-this"><a href="">最新活动</a></li>
   <li class="layui-nav-item "><a href="">产品</a></li>
   <li class="layui-nav-item"><a href="">大数据</a></li>
   <li class="layui-nav-item"> <a href="javascript:;">解决方案<span class="layui-nav-more"></span></a>
    <dl class="layui-nav-child layui-anim layui-anim-upbit">
     <dd>
      <a href="">移动模块</a>
     </dd>
     <dd>
      <a href="">后台模版</a>
     </dd>
     <dd>
      <a href="">电商平台</a>
     </dd>
    </dl> </li>
   <li class="layui-nav-item"><a href="">社区</a></li>
   <span class="layui-nav-bar" style="left: 20px; top: 55px; width: 0px; opacity: 0;"></span>
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我<span class="layui-nav-more"></span></a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
  <br>
  <div class="layui-container">
    常规布局（以中型屏幕桌面为例）：
   <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
   </div> 移动设备、平板、桌面端的不同表现：
   <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
   </div>
  </div>
  <script src="../static/js/layui.js"></script>
  <script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>
 </body>
</html>